<template>
  <div class="list-item">
    <div class="prodcut">
      <div class="product-image">
        <div class="shadow" v-if="type != 'processing'" v-bind:style="{'background-color':(type === 'waitting'?'#0090EA':(type === 'failed' ? '#BFBFBF':(item.is_lucky === '1'? '#EA363A':'#BFBFBF')))}">
          <span v-if="type === 'waitting'">
            <span v-if="item.left_second > 0">待开奖</span>
            <span v-else>正在开奖</span>
          </span>
          <span v-if="type === 'finish'? (item.is_lucky === '0') :false">未中奖</span>
          <span v-if="type === 'finish'? (item.is_lucky === '1') :false">已中奖</span>
          <span v-if="type === 'failed'">已流拍</span>
        </div>
        <div class="image">
          <img v-bind:src="item.jp_img"></img>
        </div>
      </div>
      <div class="product-comtent">
        <div class="title">
          <span>{{item.product_name}}</span>
        </div>
        <!-- 已开奖  -->
        <div class="finish" v-if="type === 'finish'">
          <div class="number">
            <span>总需人数：{{item.total_zhushu}}</span>
          </div>
          <div class="winner">
            <span>获奖者：</span>
            <span style="color:#EA363A">{{item.award_person}}</span>
          </div>
          <div class="winning-number">
            <span>中奖号码：</span>
            <span style="color:#EA363A">{{item.award_code}}</span>
          </div>
          <div class="end-time">
            <span>达成时间：</span>
            <span>{{item.reach_time}}</span>
          </div>
        </div>
        <!-- 以流拍  -->
        <div class="failed" v-if="type === 'failed'">
          <div class="number">
            <span>获奖名额：</span>
            <span style="color:#EA363A">{{item.award_users}}</span>
          </div>
          <div class="total">
            <span>总需人次：{{item.total_zhushu}}</span>
          </div>
          <div class="participate">
            <span>参与人次：{{item.now_zhushu}}</span>
          </div>
          <div class="end-time">
            <span>截止时间：</span>
            <span>{{item.active_end}}</span>
          </div>
        </div>
        <!-- 进行中/待开奖  -->
        <div class="processing" v-if="type === 'processing'? true:type === 'waitting'">
          <div class="number">
            <span>获奖名额：</span>
            <span style="color:#EA363A">{{item.award_users}}</span>
          </div>
          <div class="timer">
            <span v-if="type === 'waitting'">开奖倒计时 </span>
            <span v-if="type === 'processing'">倒计时 </span>
            <v-countDown class="count-down" v-bind:deadLine="item.left_second" v-bind:callback="timeOut"></v-countDown>
          </div>
          <div class="progress-wrapper">
            <v-progress v-bind:max="item.total_zhushu" v-bind:current="item.now_zhushu"></v-progress>
          </div>
          <div class="participate-rule">
            <span>{{item.now_zhushu}}</br>(已参与)</span>
            <span>{{item.total_zhushu}}</br>(总需人数)</span>
            <span>{{leftover_zhushu}}</br>(剩余)</span>
          </div>
        </div>
      </div>
      <!-- 已中奖才展示bottom  -->
      <div class="bottom" v-if="item.is_lucky === '1'? item.product_type === '1':false">
        <span>完善收货信息</span>
      </div>
      <!-- 未中奖或已流拍时 展示福利券-->
      <div class="bottom" v-if="(item.is_lucky === '0' && (type === 'failed' || type === 'finish'))?item.coupon_url : false" v-on:click.stop="onBottom()">
        <span>查看福利券</span>
      </div>
    </div>
  </div>
</template>

<script>
import countDown from '../../../components/countdown/CountDownNew.vue' //引入倒计时组件
import progress from '../../../components/progress/progress.vue' //引入进度条组件

export default {
  props: {
    item: {
      type: Object
    },
    refrashCallback: {
      type: Function,
      default: function() { }
    }
  },
  components: {
    'v-countDown': countDown,
    'v-progress': progress
  },
  methods: {
    onBottom() {
      location.href = "wccia://webview/" + this.item.coupon_url
    },
    timeOut() {
      this.item.left_second = '0'
      this.refrashCallback(this.item.type, this.item.jpid)
    },
    setData() {
      if (this.item.jp_type === '6' || this.item.jp_type === 6) {
        this.type = 'failed'
      } else if (this.item.jp_type === '5' || this.item.jp_type === 5) {
        this.type = 'finish'
      } else if (this.item.jp_type === '4' || this.item.jp_type === 4) {
        this.type = 'waitting'
        this.currentWidth = 100
        this.leftover_zhushu = '0'
      } else if (this.item.jp_type === '2' || this.item.jp_type === 2) {
        this.type = 'processing'
        this.leftover_zhushu = parseInt(this.item.total_zhushu) - parseInt(this.item.now_zhushu)
        const width = Math.ceil((parseInt(this.item.now_zhushu) * 100) / parseInt(this.item.total_zhushu))
        if (0 < width && width < 3) {
          this.currentWidth = 2
        } else {
          this.currentWidth
        }
      }
    }
  },
  data() {
    return {
      type: '', /*'processing(进行中/待开奖)','waitting(待开奖)','finish(已开奖)','failed(已流拍)'*/
      currentWidth: 0,
      countDown: '00:00:00',
      leftover_zhushu: '0'
    }
  },
  created() {
    this.setData()
  },
  updated() {
    this.setData()
  }
}
</script>

<style lang="stylus">
@import '../../../common/stylus/mixin.styl'
.list-item
  .prodcut
    width : 100%
    min-height : 2.90rem
    border-bottom : 1px solid rgba(7, 17, 27, 0.1) 
    font-size : 0px
    .product-image
      display : inline-block
      width : 2.4rem
      height : 2.4rem
      margin : 0.2rem 0rem 0rem 0.2rem
      .shadow
        position : absolute
        width : 1.0rem
        height : 0.35rem
        text-align : center
        span
          font-size : 0.2rem
          color : white
          line-height : 0.38rem
      .image
        width : 2.4rem
        height : 2.4rem
        img
          width : 100%
          height : 100%
          border : 1px solid rgba(7, 17, 27, 0.1) 
          border-radius : 0.05rem
    .product-comtent
      vertical-align : top
      display : inline-block
      max-width : 4.6rem
      min-width : 4.6rem
      margin-top : 0.2rem
      margin-left : 0.15rem
      margin-bottom : 0.1rem
      .title
        span
          display : -webkit-inline-box
          font-size : 0.3rem
          font-weight : 500
          line-height : 0.37rem
          max-height : 0.74rem
          word-break : break-all
          -webkit-line-clamp : 2
          -webkit-box-orient : vertical
          overflow : hidden
      .finish
        .number,.winner,.winning-number,.end-time
          font-size : 0.28rem
          font-weight : lighter
          margin-top : 0.23rem
          max-width : 4.6rem
      .failed
        .number,.total,.participate,.end-time
          font-size : 0.28rem
          font-weight : lighter
          margin-top : 0.23rem
          max-width : 4.6rem
      .processing
        .number,.timer,.participate-rule,.progress-wrapper
          font-size : 0.28rem
          font-weight : lighter
          margin-top : 0.23rem
          max-width : 4.6rem
        .count-down
          display : inline-block
        .participate-rule
          display : flex
          justify-content : space-between
          margin-top : 0.1rem
          margin-left : 0rem
          font-size : 0.2rem
          font-weight : lighter
          text-align : center
          span
            display : block
    .bottom
      background-color : #FFB643
      border-radius : 0.1rem
      margin-left : 4.7rem
      margin-bottom : 0.1rem
      width : 2.4rem
      height : 0.7rem
      font-size : 0.3rem
      text-align : center
      color : white
      span
        line-height : 0.7rem
</style>
